import React from 'react'
// import ReactEcharts from 'echarts-for-react'

class CarInsuranceDetail extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      policies: [{
        insureDate: 0,
        sumInsured: 0,
        premium: 0,
        policyNo: 0,
        policyBeginDate: '-',
        policyEndDate: '-'
      }],
      mileage: 0,
      current: 0
    }
    this.queryInfo = this.queryInfo.bind(this)
    this.calTheClassName = this.calTheClassName.bind(this)
    this.addDriverMileage = this.addDriverMileage.bind(this)
    this.switchCurrentDate = this.switchCurrentDate.bind(this)
  }

  componentDidMount () {
    this.addDriverMileage()
  }

  switchCurrentDate (state) {
    this.setState({
      current: state
    })
  }

  queryInfo () {
    const postData = {
      userId: T.urlQuery('userId')
    }
    T.fetch2({
      url: '/medicalInsurance/queryPolicies',
      data: postData
    }).then((result) => {
      if (result.success) {
        let data = result.data || {}
        this.setState({
          mileage: data.mileage,
          policies: data.policies.slice(data.policies.length - 2),
          current: data.policies.length > 1 ? 1 : 0
        })
      }
    })
  }

  addDriverMileage () {
    const that = this
    const date = new Date('2018-10-06').getTime()
    const postData = {
      userId: T.urlQuery('userId'),
      name: 'Stella Morgamanjimy',
      date
    }
    T.fetch2({
      url: '/medicalInsurance/saveDriverMileage',
      data: postData
    }).then((result) => {
      if (result.success) {
        that.queryInfo()
      }
    })
  }

  calTheClassName (state) {
    const { current } = this.state
    return current === state ? 'mile_item current-item' : 'mile_item'
  }

  getOption () {
    return {
      legend: {
        top: 0,
        left: 0,
        align: 'left',
        padding: 0
      },
      xAxis: {
        type: 'category',
        show: false,
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value',
        show: false
      },
      series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        areaStyle: {}
      }]
    }
  }

  render () {
    const { policies, current, mileage } = this.state
    return (
      <div className='detail-box'>
        <div className='mile-info-box'>
          <div className='mile-info'>
            <span className='mileage-lanel'>Mileage: </span>
            <span className='mileage-num'>{mileage} km</span>
          </div>
          <div className='mile-item-box'>
            <div className={this.calTheClassName(0)} onClick={() => this.switchCurrentDate(0)}>
              <p className='mile-label'>Insured Amount</p>
              <p className='mile-money'>{'$' + policies[0].sumInsured || 100}</p>
              <div className='divide' />
              <p className='today-label'>{policies.length > 1 ? policies[0].policyBeginDate : 'Today'}</p>
            </div>
            {
              policies.length > 1
                ? <div className={this.calTheClassName(1)} onClick={() => this.switchCurrentDate(1)}>
                  <p className='mile-label'>Insured Amount</p>
                  <p className='mile-money'>{'$' + policies[1].sumInsured || 100}</p>
                  <div className='divide' />
                  <p className='today-label'>Today</p>
                </div>
                : null
            }
          </div>
        </div>
        <div className='disease-box'>
          <div className='disease-content'>
            <div className='diease-title'>Dread Disease</div>
            <div className='diease-info'>
              <p className='disease-item clearfix'>
                <span className='disease-label'>Insurer</span>
                <span className='disease-cont'>123 Co,.Ltd</span>
              </p>
              <p className='disease-item clearfix'>
                <span className='disease-label'>Insured</span>
                <span className='disease-cont'>Stella Morgan</span>
              </p>
              <p className='disease-item clearfix'>
                <span className='disease-label'>Premium</span>
                <span className='disease-cont'>{policies[current].premium || '1%'}</span>
              </p>
              <p className='disease-item clearfix'>
                <span className='disease-label'>Policy Number</span>
                <span className='disease-cont'>{policies[current].policyNo || 'E123432XXX'}</span>
              </p>
              <p className='disease-item clearfix'>
                <span className='disease-label'>Policy Period</span>
                <span className='disease-cont'>{policies[current].policyBeginDate + '-' + policies[current].policyEndDate}</span>
              </p>
            </div>
          </div>
          <p className='detail-footer'>
            Check for
            <a className='instruct-text' href='javascript:;'>{'<' + 'Insurance Instructions' + '>'}</a>
            <a className='instruct-text' href='javascript:;'>{'<' + 'Insurance Clause' + '>'}</a>
          </p>
        </div>
      </div>
    )
  }
}

export default CarInsuranceDetail
